<template>
  <div>
    <!-- <div class="red">使用了less预处理器</div> -->
    <!-- <div class="nav_sousuo">
      <van-search @keydown.enter="enter" v-model="value" placeholder="请输入搜索关键词" />
    </div>-->
    <!-- 内容 -->
    <div class="cont">
      <div class="cont_left">
        <div
          class="l_item"
          @click="n=index"
          :class="index == n ? 'act' : ''"
          v-for="(item,index) in cates"
          :key="item.id"
        >{{item.catename}}</div>
      </div>
      <div class="cont_right" v-if="cates.length > 0">
        <div class="r_item" @click="$router.push('/list?id='+item.id+'&type=2')" v-for="(item) in cates[n].children" :key="item.id">
          <img :src="$pre + item.img" alt />
          <div class="text">{{item.catename}}</div>
        </div>
        <!-- 无数据 -->
        <van-empty v-if="!cates[n].children" image="search" description="暂无数据" />
      </div>
    </div>
  </div>
</template>

<script>
import { reqCates } from "../../http/http";
export default {
  methods: {
  },
  data() {
    return {
      cates: [],
      n: 0
    };
  },

  mounted() {
    console.log(this.$router);
    // 一进来就发请求
    reqCates().then(res => {
      this.cates = res.data.list;
    });
  }
};
</script>

<style lang="less">
@import "../../less/color.less";
.red {
  color: @primary;
}
.main {
  margin-top: 0rem !important;
}
body {
  background-color: #fffff9;
}

.cont {
  display: flex;
  // min-height: 80%;
  margin-top: .8rem;
}
.cont_left {
  height: 100vh;
  width: 2rem;
  border-right: 2px solid #ccc;
}
.cont_left .l_item {
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
  transition: all 0.3s;
}
.act {
  background-color: #ff4400;
  color: #fff;
}
.cont_right {
  flex: 1;
}
.r_item {
  width: 50%;
  float: left;
  padding: 0.2rem;
  box-sizing: border-box;
  text-align: center;
}
.r_item img {
  width: 80%;
  height: 1.5rem;
  border-radius: 50%;
}
.text {
  font-size: 0.24rem;
}
</style>